﻿@page "/breakpoints"

<PageTitle>Blazor Responsive Breakpoints | Free UI Components by Radzen</PageTitle>
<HeadContent>
    <meta name="description" content="Responsive breakpoints are used to adjust the layout based on the screen size of the device in use.">
</HeadContent>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Responsive Breakpoints
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Responsive breakpoints are used to adjust the layout based on the screen size of the device in use. They allow a single layout to adapt to different screen sizes, from small mobile phone screens to large desktop monitors.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    This page covers predefined breakpoints (xs/sm/md/lg/xl/xx) optimized for various devices, and their usage in layout components like <code>RadzenColumn</code> with responsive <code>Size</code> properties, display mode utilities (<code>rz-display-{breakpoint}-{value}</code>), content overflow classes (<code>rz-overflow-{breakpoint}-{value}</code>), sizing utilities (<code>rz-w-{breakpoint}-{size}</code>), and spacing classes (<code>rz-m-{breakpoint}-{size}</code>) for responsive margin/padding.
</RadzenText>

<RadzenText Anchor="breakpoints#breakpoints" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Breakpoints
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    A breakpoint is a specific screen width at which the layout of an app or web page will change. For example, a breakpoint with min-width of 576px means that when the screen width is 576 pixels or more, the layout will change to efficiently use the screen real estate.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-4">
    Here is a list of the predefined breakpoints and their abbreviations in Radzen Blazor Components, optimized for a wide range of devices.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><code>xs</code> - Extra Small ≥ 576px</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><code>sm</code> - Small ≥ 768px</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><code>md</code> - Medium ≥ 1024px</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><code>lg</code> - Large ≥ 1280px</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><code>xl</code> - Extra Large ≥ 1920px</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><code>xx</code> - Extra Extra Large ≥ 2560px</RadzenText>

<RadzenText Anchor="breakpoints#usage" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Usage of Breakpoints
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8">
    Breakpoints in Layouts
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    Breakpoints are primarily used in layouts. For example, you can define the width of a <code>RadzenColumn</code> component by setting the respective <code>Size</code> property. E.g. <code>SizeMD="6"</code>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    See <RadzenLink Text="Column" Path="/column" /> demos to learn how to adjust your page layouts using breakpoints.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8">
    Breakpoints and Display Modes
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    Breakpoints are available with CSS utility classes for <code>display</code>. For example, you can define the display mode of an element by setting the respective <code>.rz-display-{breakpoint}-{value}</code> CSS class. E.g. <code>.rz-display-md-flex</code>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    See <RadzenLink Text="Display" Path="/display" /> demo to learn how to use breakpoints with display.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8">
    Breakpoints and Content Overflow
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    Breakpoints are available with CSS utility classes for <code>overflow</code>. For example, you can define the overflow of content within an element by setting the respective <code>.rz-overflow-{breakpoint}-{value}</code> CSS class. E.g. <code>.rz-overflow-md-scroll</code>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    See <RadzenLink Text="Overflow" Path="/overflow" /> demo to learn how to use breakpoints with display.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8">
    Breakpoints in Sizing
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    Breakpoints are available with CSS utility classes for <code>width</code> and <code>height</code>. For example, you can define the width of an element by setting the respective <code>.rz-w-{breakpoint}-{size}</code> CSS class. E.g. <code>.rz-w-md-100</code>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    See <RadzenLink Text="Sizing" Path="/sizing" /> demos to learn how to use breakpoints with widths and heights.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8">
    Breakpoints in Spacing
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    Breakpoints can also be used with the Spacing CSS utility classes for <code>margin</code> and <code>padding</code>. For example, you can define the margin of an element by setting the respective <code>.rz-m-{breakpoint}-{size}</code> CSS class. E.g. <code>.rz-m-md-1</code>
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-6 rz-mb-4">
    See <RadzenLink Text="Spacing" Path="/spacing" /> demos to learn how to use breakpoints with margins and paddings.
</RadzenText>